import React from 'react';
import useLocale from '@/utils/useLocale';
import { Popconfirm, Space, Tooltip } from '@arco-design/web-react';
import { IconDelete, IconEdit, IconPlus } from '@arco-design/web-react/icon';

const locale = {
  'en-US': {},
  'zh-CN': {
    'button.create': '创建',
    'button.update': '编辑',
    'button.delete': '删除',
    'button.search': '搜索',
    'button.reset': '重置',

    'confirm.title.delete': '确定删除',
    'confirm.content.delete': '删除后将不可恢复！'
  }
};

const TableOperationButtonGroup = (props: {
  record?: { id?: number };
  onCreate?: () => void;
  onUpdate?: () => void;
  onDelete?: () => void;
}) => {
  const t = useLocale(locale);

  return (
    <Space size={12} key={'space_' + props.record?.id}>
      {
        !!props.onCreate &&
        <Tooltip content={t['button.create']}>
          <IconPlus style={{ color: '#375fad' }} key={'create_' + props.record?.id} onClick={props.onCreate} />
        </Tooltip>
      }
      {
        !!props.onUpdate &&
        <Tooltip content={t['button.update']}>
          <IconEdit key={'update_' + props.record?.id} onClick={props.onUpdate} />
        </Tooltip>
      }
      {
        !!props.onDelete &&
        <Popconfirm
          key={'delete_' + props.record?.id}
          focusLock
          title={t['confirm.title.delete']}
          content={t['confirm.content.delete']}
          onOk={props.onDelete}
        >
          <Tooltip content={t['button.delete']}>
            <IconDelete style={{ color: 'red' }} key={'delete_' + props.record?.id} />
          </Tooltip>
        </Popconfirm>
      }
    </Space>
  );
};

export { TableOperationButtonGroup };